<template>
  <div class="nav">
    <div class="container">
      <router-link class="tab-item" :to="{ name: 'CompanyHomeHome' }">企业主页</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeProduct' }">公司产品</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeIntro' }">公司介绍</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeCertifi'}">PackMate认证</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeNews' }">公司新闻</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeConnect' }">联系方式</router-link>
      <router-link class="tab-item" :to="{ name: 'CompanyHomeProblem' }">常见问题</router-link>
      <div class="search-bar">
        <m-searchbar type="orange" width="200px" v-model.trim="keywords" placeholder="搜索本站产品" @click-search="search"/>
      </div>
    </div>
  </div>
</template>

<script>
import MSearchbar from '@/components/m-searchbar/MSearchbar'

export default {
  name: 'Nav',
  components: { MSearchbar },
  data() {
    return {
      keywords: ""
    }
  },
  methods: {
    search() {
      if (!this.keywords) {
        return
      }
      this.$router.push({
        name: 'CompanyHomeProduct',
        query: {
          keyword: this.keywords,
          t: Date.now()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .theme-orange .el-input-group__prepend {
  border: none;
}

/deep/ .theme-orange .el-input {
  border: 1px solid #fff;
  border-radius: 21px;
}

.nav {
  height: 65px;
  line-height: 65px;
  font-size: 16px;
  color: #fff;
  background: #E38B2E;
}

.nav .container {
  display: flex;
  align-items: center;
}

.nav .container .tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.nav .container .tab-item:hover {
  color: #E38B2E;
  background: #fcd4a0;
}

.nav .container .tab-item::after {
  content: '';
  width: 1px;
  height: 32px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 16px;
  opacity: 0.4;
}

.nav .container .tab-item:last-of-type::after {
  display: none;
}

.router-link-active {
  color: #E38B2E;
  background: #fcd4a0;
}

.search-bar {
  margin-left: 30px;
}
</style>
